<template>
  <div class="app-container">
    <Pagetitle
      :title="pageTitle.title"
      :name="pageTitle.name"
      :btnName="pageTitle.btnName"
      @btnFun="btnFun"
    ></Pagetitle>
    <div class="filter-container">

    </div>
    <div class="table-container">
      <Table
        stripe
        :loading="dataTable.loading"
        :border="dataTable.border"
        :columns="dataTable.columns"
        :data="dataTable.data"
      >
        <template
          slot-scope="{row,index}"
          slot="action"
        >
          <div class="btn-table-box">
            <div
              class="btn-text-blue"
              @click="showGroupUser(row)"
            >查看组员</div>
            <div
              class="btn-text-blue"
              @click="showEditorLeader(row)"
            >替换组长</div>
            <Poptip
              confirm
              width="200"
              placement="top-end"
              :title="'你确定要删除？'"
              :content="row.name+'组长'"
              @on-ok="getLeaderDel(row.auditId)"
              @on-cancel=""
            >
              <div
                class="btn-text-blue"
                v-if="row.crewCount === 0"
              >删除组长</div>
            </Poptip>
          </div>
        </template>
      </Table>

      <Row class="mtop20">
        <Col
          :md="4"
          class="flex-start-center height-30 page"
        >
        <div>
          共{{count}}条
          <Select
            v-model="limit"
            size="small"
            class="lz-select-width"
            @on-change="changePageSize(1)"
          >
            <Option
              v-for="item in pageSizeSeletc"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </div>
        </Col>
        <Col
          :md="12"
          class="flex-center-center height-30"
        >
        <Page
          v-if="pageshow"
          :total="count"
          :page-size="limit"
          @on-change="changePageSize"
          size="small"
          show-elevator
        />
        </Col>
        <Col :md="8">

        </Col>
      </Row>
    </div>
    <Modal
      v-model="groupUserModal"
      :closable="false"
      :footer-hide="true"
    >
      <div class="modal-content">

        <div class="modal-header">
          <span>查看成员</span>
          <a @click="closeModal()">
            <svg-icon icon-class="close" />
          </a>
        </div>
        <div class="modal-body">
          <Row>
            <Col
              :span="8"
              v-for="user in groupUserSelect"
              :key="user.userId"
            >
            <span class="group-user">{{user.name}}</span>（工号：{{user.userId}}）
            </Col>
          </Row>
        </div>
        <div class="modal-footer">
          <Button
            type="primary"
            @click="closeModal()"
          >确定</Button>
        </div>
      </div>
    </Modal>

    <Modal
      v-model="addLeaderModal"
      :closable="false"
      :footer-hide="true"
    >
      <div class="modal-content">
        <Form
          ref="addLeaderForm"
          :model="addLeaderForm"
          :rules="ruleValidate"
          :label-width="80"
        >
          <div class="modal-header">
            <span>组长新增</span>
            <a @click="closeModal('addLeaderForm')">
              <svg-icon icon-class="close" />
            </a>
          </div>
          <div class="modal-body">
            <Row>
              <Col :span="12">
              <FormItem
                label="姓名"
                prop="name"
              >
                <Input
                  v-model="addLeaderForm.name"
                  placeholder="请输入姓名"
                ></Input>
              </FormItem>
              </Col>
              <Col :span="12">
              <FormItem
                label="工号"
                prop="userId"
              >
                <Input
                  v-model="addLeaderForm.userId"
                  placeholder="请输入工号"
                ></Input>
              </FormItem>
              </Col>
            </Row>

            <Row>
              <Col :span="12">
              <FormItem
                label="部门"
                prop="departmentId"
              >
                <Select
                  v-model="addLeaderForm.departmentId"
                  placeholder="全部部门"
                >
                  <Option value="">全部部门</Option>
                  <Option
                    v-for="(depart,index) in departmentListSelect"
                    :key="depart.id"
                    :value="depart.id"
                  >{{depart.departmentName}}</Option>
                  </Option>
                </Select>
              </FormItem>
              </Col>
              <Col :span="12">
              <FormItem
                label="组别"
                prop="categoryName"
              >
                <Select
                  v-model="addLeaderForm.categoryName"
                  placeholder="全部组别"
                >
                  <Option value="">全部组别</Option>
                  <template v-for="category in categoryListSelect">
                    <Option
                      :key="category.id"
                      :value="category.categoryName"
                    >{{category.categoryName}}</Option>
                  </template>
                </Select>
              </FormItem>
              </Col>
            </Row>

          </div>
          <div class="modal-footer">
            <Button @click="closeModal('addLeaderForm')">
              取消
            </Button>
            <Button
              type="primary"
              @click="handleSubmitAddLeader('addLeaderForm')"
            >确定</Button>
          </div>
        </Form>
      </div>
    </Modal>

    <Modal
      v-model="editorLeaderModal"
      :closable="false"
      :footer-hide="true"
    >
      <div class="modal-content">
        <Form
          ref="editorLeaderForm"
          :model="editorLeaderForm"
          :rules="ruleValidate"
          :label-width="80"
        >
          <div class="modal-header">
            <span>组长编辑</span>
            <a @click="closeModal('editorLeaderForm')">
              <svg-icon icon-class="close" />
            </a>
          </div>
          <div class="modal-body">
            <Row>
              <Col :span="12">
              <FormItem
                label="组长"
                prop="leaderUserId"
              >
                <Select
                  v-model="editorLeaderForm.leaderUserId"
                  placeholder="全部组员"
                >
                  <Option value="">全部组员</Option>
                  <template v-for="group in groupUserSelect">
                    <Option
                      :key="group.userId"
                      :value="group.userId"
                    >{{group.name}}</Option>
                  </template>
                </Select>
              </FormItem>
              </Col>
            </Row>
            <div class="warning">
              <svg-icon icon-class="warning" />
              替换组长后，原组员都直接由新组长进行审批
            </div>
          </div>
          <div class="modal-footer">
            <Button @click="closeModal('editorLeaderForm')">取消</Button>
            <Button
              type="primary"
              @click="handleSubmitChangeLeader('editorLeaderForm')"
            >确定</Button>
          </div>
        </Form>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  fetchAuditList,
  fetchAddUser,
  fetchLeaderDel,
  fetchLeaderChange,
  fetchAddContent,
  fetchUserDetail,
  fetchCrewList
} from "@/api/table";
import { Pagetitle, Model } from "@/components";
export default {
  data() {
    return {
      pageshow: true,
      //总页码
      count: 0,
      //页码
      currentPage: 1,
      //总条数
      limit: 10,
      pageSizeSeletc: [
        {
          value: 10,
          label: "10条/页"
        },
        {
          value: 20,
          label: "20条/页"
        }
      ],
      modal1: false,
      pageTitle: {
        title: "组长管理",
        name: "新增组长",
        btnName: "btnFun"
      },
      dataTable: {
        loading: false,
        border: false,
        columns: [
          {
            title: "工号",
            key: "userId"
          },
          {
            title: "姓名",
            key: "name"
          },
          {
            title: "组员数",
            key: "crewCount"
          },
          {
            title: "部门",
            key: "departmentName"
          },
          {
            minWidth: 100,
            maxWidth: 210,

            title: "操作",
            slot: "action"
          }
        ],
        data: []
      },
      auditListSelect: [],
      categoryListSelect: [],
      departmentListSelect: [],
      levelListSelect: [],
      groupUserSelect: [],

      addLeaderForm: {
        name: "",
        userId: "",
        categoryName: "",
        departmentId: "",
        levelName: "",
        auditId: ""
      },
      editorLeaderForm: {
        auditId: "",
        leaderUserId: ""
      },
      editorLeaderModal: false,
      addLeaderModal: false,
      groupUserModal: false,
      ruleValidate: {
        name: [
          {
            required: true,
            message: "填写姓名",
            trigger: "blur"
          }
        ],
        userId: [
          {
            required: true,
            message: "填写工号",
            trigger: "blur"
          }
        ],
        leaderUserId: [
          {
            required: true,
            message: "选择信息",
            trigger: "change"
          }
        ],
        categoryName: [
          {
            required: true,
            message: "选择信息",
            trigger: "change"
          }
        ],
        departmentId: [
          {
            required: true,
            message: "选择信息",
            trigger: "change",
            type: "number"
          }
        ],
        levelName: [
          {
            required: true,
            message: "选择信息",
            trigger: "change"
          }
        ],
        auditId: [
          {
            required: true,
            message: "选择信息",
            trigger: "change",
            type: "number"
          }
        ]
      }
    };
  },
  components: {
    Pagetitle,
    Model
  },
  mounted() {
    this.getAuditList();
    this.getAddContent();
  },
  methods: {
    //分页
    changePageSize(index) {
      this.currentPage = index;
      this.getAuditList();
    },
    async getAuditList() {
      this.dataTable.loading = true;
      const res = await fetchAuditList({
        pageNo: this.currentPage,
        pageSize: this.limit
      });
      this.dataTable.loading = false;
      this.count = res.data.total;
      this.dataTable.data = [];
      res.data.list.forEach(item => {
        const data = {};
        data.auditId = item.auditId;
        data.crewCount = item.crewCount;
        data.departmentName = item.departmentName;
        data.name = item.name;
        data.userId = item.userId;
        this.dataTable.data.push(data);
      });
    },
    async addUser(name) {
      const res = await fetchAddUser({
        userId: this.addLeaderForm.userId,
        name: this.addLeaderForm.name,
        categoryName: this.addLeaderForm.categoryName,
        departmentId: this.addLeaderForm.departmentId
      });
      this.closeModal(name);
      this.$Message.success("修改成功");
    },
    async EditorUser(name) {
      const res = await fetchEditorUser({
        userId: this.editorUserForm.userId,
        categoryName: this.editorUserForm.categoryName,
        levelName: this.editorUserForm.levelName,
        departmentId: this.editorUserForm.departmentId,
        auditId: this.editorUserForm.auditId
      });
      this.closeModal(name);
      this.$Message.success("修改成功");
    },
    async getLeaderDel(id) {
      const res = await fetchLeaderDel({
        auditId: id
      });
      this.getAuditList();
      this.$Message.success("删除成功");
    },
    async getAddContent() {
      const res = await fetchAddContent();
      this.auditListSelect = [];
      this.categoryListSelect = [];
      this.departmentListSelect = [];
      //组长
      res.data.auditList.forEach(item => {
        const data = {};
        data.auditId = item.auditId;
        data.auditName = item.auditName;
        data.departmentId = item.departmentId;
        this.auditListSelect.push(data);
      });
      //组别
      res.data.categoryList.forEach(item => {
        const data = {};
        data.id = item.id;
        data.categoryName = item.categoryName;
        this.categoryListSelect.push(data);
      });
      //部门
      res.data.departmentList.forEach(item => {
        const data = {};
        data.id = item.id;
        data.departmentName = item.departmentName;
        this.departmentListSelect.push(data);
      });
      //级别
      res.data.levelList.forEach(item => {
        const data = {};
        data.levelName = item.levelName;
        this.levelListSelect.push(data);
      });
    },
    // async getUserDetail(id) {
    //   const res = await fetchUserDetail({
    //     userId: id
    //   });
    //   this.editorUserForm.userId = res.data.userId;
    //   this.editorUserForm.name = res.data.name;
    //   this.editorUserForm.categoryName = res.data.categoryName;
    //   this.editorUserForm.departmentName = res.data.departmentId;
    //   this.editorUserForm.auditId = res.data.auditId;
    // },
    async getCrewList(id) {
      const res = await fetchCrewList({
        auditId: id
      });
      this.groupUserSelect = [];
      res.data.forEach(item => {
        const data = {};
        data.name = item.name;
        data.userId = item.userId;
        this.groupUserSelect.push(data);
      });
    },
    async leaderChange(name) {
      const res = await fetchLeaderChange({
        auditId: this.editorLeaderForm.auditId,
        userId: this.editorLeaderForm.leaderUserId
      });
      this.closeModal(name);
      this.getAuditList();
      this.$Message.success({ content: "修改成功" });
    },
    btnFun() {
      this.addLeaderModal = true;
    },
    go(url) {
      this.$router.push({
        path: url
      });
    },
    resetForm(name) {
      this.$refs[name].resetFields();
    },
    closeModal(name) {
      if (name) {
        this.resetForm(name);
      }
      this.addLeaderModal = false;
      this.editorLeaderModal = false;
      this.groupUserModal = false;
    },
    handleSubmitAddLeader(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.addUser(name);
        }
      });
    },
    handleSubmitChangeLeader(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.leaderChange(name);
        }
      });
    },
    showGroupUser(row) {
      this.getCrewList(row.auditId);
      this.groupUserModal = true;
    },
    showEditorLeader(row) {
      this.getCrewList(row.auditId);

      this.editorLeaderForm.auditId = row.auditId;
      this.editorLeaderModal = true;
    },
    search() {
      this.currentPage = 1;
      this.pageshow = false;
      this.getAuditList();
      this.$nextTick(() => {
        this.pageshow = true;
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import "~@/styles/mixin";
.group-user {
  color: @default-color;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
}
.warning {
  margin-left: 30px;
  color: @primary-color;
}
</style>
<style >
.ivu-table-wrapper {
  overflow: visible;
}
</style>